<template>
  <div class="wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <basic-opt :has_left="true">
      <template #search>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
                    @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-input class="w-ipt" placeholder="请输入face_id进行筛选" suffix-icon="el-icon-search"
                    v-model="search.face_id" @keydown.enter="getSearchData" size="medium">
          </el-input>
        </div>
        <div class="opt-item">
          <el-button @click="getSearchData" size="medium">搜索</el-button>
        </div>
        <div class="opt-item">
          <reset-search></reset-search>
        </div>
      </template>
      <template #add>
        <div class="opt-item">
          <el-button @click="addForm" icon="el-icon-circle-plus-outline" type="primary" size="medium">添加人脸
          </el-button>
        </div>
      </template>
    </basic-opt>

    <div class="table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="table_max_height">
        <el-table-column prop="id" label="ID" width="100px"></el-table-column>
        <el-table-column prop="name" label="名字"></el-table-column>
        <el-table-column prop="face_id" label="人脸ID"></el-table-column>
        <el-table-column prop="group" label="人脸组" width="200px"></el-table-column>
        <el-table-column prop="number" label="学号/身份证号"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="href" label="人脸图片">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.href" style="max-width:800px;max-height:800px;"/>
              <template #reference>
                <img :src="scope.row.href" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <div class="showOperation">
              <el-button @click="onEditData(scope.row)" type="success" plain size="mini">编辑</el-button>
              <el-button @click="onDelData(scope.row)" type="danger" plain size="mini">删除</el-button>
              <el-button @click="onMoreOperation(scope.row)" type="info" plain size="mini">更多操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>

    <!-- 添加人脸 -->
    <compoment-drawer :drawer_name="drawer_name" :drawer_form="drawer_form" @getDrawerForm="getDrawerForm">
      <el-form ref="form" :model="form" label-width="120px">
        <el-scrollbar height="80vh" v-loading="form_loading" element-loading-text="正在进行请求,请稍后"
                      element-loading-spinner="el-icon-loading">
          <div class="form-flex">
            <el-form-item label="姓名" prop="name">
              <el-input class="w-ipt" v-model="form.name" placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="国家/地区编码" prop="gjhdq">
              <el-select v-model="form.gjhdq" filterable placeholder="请搜索国家/地区编码添加"
                         @change="handleCheckGjhdq" class="w-ipt">
                <el-option v-for="(value, name) in gjhdq_list" :key="name" :label="value" :value="name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件类型" prop="cyzj">
              <el-select v-model="form.cyzj" filterable placeholder="请搜索证件类型添加" @change="handleCheckCyzj"
                         class="w-ipt">
                <el-option v-for="(value, name) in cyzj_list" :key="name" :label="value" :value="name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="number">
              <el-input class="w-ipt" v-model="form.number" placeholder="请输入证件号码"></el-input>
            </el-form-item>
            <el-form-item label="民族类型" prop="mz">
              <el-select v-model="form.mz" filterable placeholder="请搜索民族类型添加" @change="handleCheckMz"
                         class="w-ipt">
                <el-option v-for="(value, name) in mz_list" :key="name" :label="value" :value="name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="通知地址" prop="notify_url">
              <el-input class="w-ipt" v-model="form.notify_url" type="textarea" placeholder="请输入通知地址">
              </el-input>
            </el-form-item>
            <el-form-item label="上传人脸" prop="type">
              <upload-image :href="form.href" ref="childUploadImage" @getChildFaceImage="getFaceImage">
              </upload-image>
            </el-form-item>
          </div>
        </el-scrollbar>
        <submit-reset @getChildNewForm="getNewForm" @getChildResetForm="resetForm('form')">
        </submit-reset>
      </el-form>
    </compoment-drawer>

    <!-- 删除数据确认 -->
    <delete-data :del_data_dialog="del_data_dialog" @getDelData="getDelData" @getCancelDelData="getCancelDelData">
      <el-descriptions class="margin-top" :column="1" size="medium" border>
        <el-descriptions-item>
          <template #label>
            id
          </template>
          {{ delData.id }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            姓名
          </template>
          {{ delData.name }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            证件号码
          </template>
          {{ delData.number }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            通知地址
          </template>
          {{ delData.notify_url }}
        </el-descriptions-item>
      </el-descriptions>
    </delete-data>
  </div>
  <!--  mobile  -->
  <div class="mobile-wrap" v-loading="loading" element-loading-text="等下,我正在请求" element-loading-spinner="el-icon-loading">
    <div class="mobile-search-vertical">
      <el-input class="w-ipt" placeholder="请输入姓名进行筛选" suffix-icon="el-icon-search" v-model="search.name"
                @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-input class="w-ipt" placeholder="请输入face_id进行筛选" suffix-icon="el-icon-search"
                v-model="search.face_id" @keydown.enter="getSearchData" size="medium">
      </el-input>
      <el-button @click="getSearchData" size="medium">搜索</el-button>
    </div>
    <div class="moblie-table-box">
      <el-table :data="data" stripe :header-cell-style="header_cell_style" :max-height="mobile_table_max_height">
        <el-table-column prop="id" label="ID" width="100px"></el-table-column>
        <el-table-column prop="name" label="名字"></el-table-column>
        <el-table-column prop="face_id" label="人脸ID"></el-table-column>
        <el-table-column prop="group" label="人脸组" width="200px"></el-table-column>
        <el-table-column prop="number" label="学号/身份证号"></el-table-column>
        <el-table-column prop="phone" label="联系方式"></el-table-column>
        <el-table-column prop="href" label="人脸图片">
          <template #default="scope">
            <el-popover placement="left" trigger="click">
              <img :src="scope.row.href" style="max-width:800px;max-height:800px;"/>
              <template #reference>
                <img :src="scope.row.href" style="max-width:180px;max-height:80px;">
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <div class="showOperation">
              <el-button @click="onMoreOperation(scope.row)" type="info" plain size="mini">更多操作</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <page-component @pageChanged="onPageChanged"></page-component>
  </div>
</template>

<script>
import API from '@/api/index.js'
import mixin from '@/mixin.js'
import UploadImage from '@/components/form/upload-image.vue'

export default {
  name: 'faceList',
  mixins: [mixin],
  components: {
    UploadImage
  },
  data() {
    return {
      search: {
        name: '',
        face_id: ''
      },

      // 表单
      drawer_name: '添加人脸',
      form_loading: false, // 表单填写时加载
      form: {
        name: '',
        number: '',
        href: '',
        gjhdq: '',
        cyzj: '',
        mz: '',
        notify_url: ''
      },
      gjhdq_list: [],
      cyzj_list: [],
      mz_list: []
    }
  },
  mounted() {
    this.getData();
    this.getZJXX();
  },
  methods: {
    async getData() {
      let self = this;
      self.loading = true;
      try {
        let params = {
          name: self.search.name ? self.search.name : '',
          face_id: self.search.face_id ? self.search.face_id : ''
        }
        self.addPageInfo(params)
        let res = await API.faces(params.pageNumber, params.pageSize, params.name, params.face_id)
        self.loading = false;
        self.onGotPageData(res)
      } catch (err) {
        self.loading = false;
      }
    },
    getZJXX() {
      API.getGjhdq().then(res => {
        this.gjhdq_list = res.data.data;
      })
      API.getZjlb().then(res => {
        this.cyzj_list = res.data.data;
      })
      API.getMzdm().then(res => {
        this.mz_list = res.data.data;
      })
    },
    // 编辑数据
    onEditData(row) {
      let self = this;
      self.drawer_form = true;
      console.log(row)
      self.form = {
        id: row.id,
        name: row.name,
        number: row.number,
        href: row.href,
        gjhdq: row.gjhdq,
        cyzj: row.cyzj.toString(),
        mz: row.mz,
        notify_url: row.notify_url
      }
    },
    // 确定删除数据
    submitDeleteData(val) {
      let self = this;
      API.delFace(val).then(res => {
        console.log(res)
        self.getData();
        self.delSuccess();
      }).catch(err => {
        self.$message.error(err.response.data.message)
      })
    },
    // 提交表单
    getNewForm() {
      let self = this;
      self.form_loading = true;
      console.log(self.form)
      API.face(self.form).then(res => {
        console.log(res)
        self.submitSuccess();
        self.drawer_form = false;
        self.form_loading = false;
        self.getData();
        self.initForm();
      }).catch(err => {
        self.form_loading = false;
        self.$message.error(err.response.data.message);
      });
    },
    handleCheckGjhdq(val) {
      let self = this;
      self.form.gjhdq = val;
    },
    handleCheckCyzj(val) {
      let self = this;
      self.form.cyzj = val;
    },
    handleCheckMz(val) {
      let self = this;
      self.form.mz = val;
    },
    // 把子组件上传的人脸赋给表单的href
    getFaceImage(val) {
      let self = this;
      self.form.href = val.faceImage;
    },
    // 初始表单
    initForm() {
      let self = this;
      self.form = {
        name: '',
        number: '',
        href: '',
        gjhdq: '',
        cyzj: '',
        mz: '',
        notify_url: ''
      }
    },

    // 更多操作
    onMoreOperation(row) {
      let self = this;
      localStorage.setItem('face_id', row.face_id);
      localStorage.setItem('face_group', row.group);
      localStorage.setItem('face_name', row.name);
      self.$router.replace({
        path: '/face-operation',
        query: {
          face_id: row.face_id,
          face_group: row.group
        }
      });
    }
  }
}
</script>
